<template>

    <div ref="iframeCnt" class="com-cnt" style="font-size:14px;">
        <div class="box">
            <!-- 地址 -->
            <ul class='oist'>
                <li v-for="item in list">
                    <div class="boom">
                        <div class="boom_t">
                            <p>
                                <span>{{item.name}}</span>
                                <span>{{newItem(item.mobile)}}</span>
                                <span class="te active">默认</span>
                            </p>
                            <p>
                                {{item.part1}} {{item.part2}} {{item.part5}}
                            </p>
                        </div>
                        <div class="boom_b">
                            <div class="set">
                                <input type="radio" id="radio1" name="radio" checked="checked" />
                                <label for="radio1"></label>
                                <span class="mr" style="color:#F8A120">默认地址</span>
                            </div>

                            <div class="right">
                                <div class="edit">
                                    <!-- <div class="corn"></div> -->
                                    <span class="corn" @click="direct(item.id)">编辑</span>
                                </div>
                                <div class="del">
                                    <!-- <div class="corn"></div> -->
                                    <span class="corn delete" @click="del()" :data-id="item.id">删除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- 添加收货人按钮 -->
            <button class="btn" @click="Jump()">添加新收货人</button>
        </div>
    </div>
</template>

<script>

import http from "@/assets/js/axios"
import { domain } from '@/assets/js/config'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
export default {
    name: 'dzglPage',
    data() {
        return {
            list: [],
        }
    },
    mounted() {
        this.getAddress();
    },
    methods: {
        direct: function (val) {
            this.$router.push({path: "/detail",
                query: {
                    id: val
                }
            });
        },
        del: function (val) {
            let that = this;
            let userToken = localStorage.getItem("token") || '';
            var data_id = $('.delete').attr('data-id');
            axios({
                url: domain + '/xshk/f/adress/del?token=' + userToken + '&addressId=' + data_id,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                // data: Qs.stringify(id)
            }).then(res => { that.listsucc(res) }).catch(err => { that.listerr(err) })
        },
        Jump:function(val){
            this.$router.push({                path: "/add",
            });
        },
        getAddress: async function () {
            let that = this
            let userToken = localStorage.getItem("token") || '';
            const res = await http.post('xshk/f/adress/view?token=' + userToken)
            if (res.status == 200) {
                if (res.data.data) {
                    
                    that.list = res.data.data.list;
                    //console.log(this.list.length)
                    if(!that.list){
                        that.list = []
                    }
                    if(this.list.length >= 1){
                        $('.btn').hide();
                    }
                } else {
                    this.list.list = []
                }
            }
        },
        newItem(item) {
            return `${item.substring(0, 3)}****${item.substring(item.length - 4)}`;
        },
        listsucc: function (res) {
            if (res.status == 200) {
                console.log(res)
                window.location.reload();
            }
        },
        listerr: function (res) {
            console.log(res)
        },
    },
}
</script>
<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: auto;
}

html, body {
    font-size: 50px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

/* title */
.header {
    height: 0.92rem;
    text-align: center;
    background: #f9f9f9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.left {
    font-size: 0.28rem;
    position: absolute;
    left: 0.34rem;
    top: 0.36rem;
}

.title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.92rem;
}

/* 地址 */
.box {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    position: relative;
    font-family: 'PingFang-SC-Medium';
    // margin-top: 0.92rem;
}

.box ul {
    width: 100%;
    height: auto;
}

.box ul li {
    width: 100%;
    background: #fff;
    margin-bottom: 0.2rem;
}

.box ul li .boom {
    width: 100%;
}

.box ul li .boom .boom_t {
    height: auto;
    border-bottom: 1px solid #f2f2f2;
    padding: 0.26rem 0.4rem;
    box-sizing: border-box;
}

.box ul li .boom .boom_b {
    height: 0.79rem;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.box ul li .boom .boom_t p {
    font-size: 0.24rem;
    line-height: 0.56rem;
    color: #999;
    font-family: 'PingFang-SC-Regular';
}

.box ul li .boom .boom_t p span {
    color: #666;
    font-size: 0.24rem;
    line-height: 0.56rem;
    margin-right: 0.1rem;
}

.box ul li .boom .boom_t p .te {
    display: inline-block;
    width: 0.8rem;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #f19736;
    border: 1px solid #f19736;
    border-radius: 5px;
    text-align: center;
    display: none;
}

.box ul li .boom .boom_t p .active {
    display: inline-block;
}

.set {
    float: left;
    width: 65%;
    height: 100%;
}

input {
    display: none;
    width: 0.36rem;
    height: 0.36rem;
    float: left;
    margin: 0.16rem 0.16rem 0 0;
}

label {
    width: 10%;
    height: 100%;
    display: inline-block;
    position: relative;
    line-height: 50px;
    color: #999;
    float: left;
}

label:active {
    background: #EEEEEE;
}

label:after {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid #F8A120;
    position: absolute;
    top: 0.22rem;
    margin-right: 10px;
    border-radius: 20px;
}

input:checked+label:after {
    background-color: #F8A120;
}

.line {
    width: 100%;
    height: 1px;
    background: #ccc;
    opacity: 0.2;
}

.box ul li .boom .boom_b span {
    color: #999;
    font-size: 0.24rem;
    line-height: 0.79rem;
    display: inline-block;
    float: left;
}

.box ul li .boom .boom_b .right {
    float: right;
    width: 2.24rem;
    height: 100%;
}

.box ul li .boom .boom_b .right .edit {
    float: left;
    font-family: 'PingFang-SC-Regular';
    background: url('../../assets/imgs/bianji.png') no-repeat center left;
}

.box ul li .boom .boom_b .right .del {
    float: right;
    font-family: 'PingFang-SC-Regular';
    background: url('../../assets/imgs/shanchu.png') no-repeat center left;
}

.box ul li .boom .boom_b .right .corn {
    margin-left: 0.5rem;
}

/* 添加收货人按钮 */
.btn {
    width: 100%;
    height: 1rem;
    position: fixed;
    bottom: 1rem;
    background: #f8a120;
    border: none;
    outline: none;
    font-size: 0.4rem;
    color: #fff;
    font-family: 'PingFang-SC-Medium';
}
</style>